<!DOCTYPE html>
<html lang="zh">

<head th:replace="common::head"></head>

<body>
<!-- [ Pre-loader ] start -->
<div class="loader-bg" th:replace="common::loader"></div>
<!-- [ Pre-loader ] End -->

<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar theme-horizontal" th:replace="common::nav"></nav>
<!-- [ navigation menu ] end -->

<!-- [ Header ] start -->
<header class="navbar pcoded-header navbar-expand-lg navbar-light" th:replace="common::header"></header>
<!-- [ Header ] end -->

<!-- [ chat user list ] start -->
<section class="header-user-list">
    <div class="h-list-header">
        <div class="input-group">
            <input type="text" id="search-friends" class="form-control" placeholder="Search Friend . . .">
        </div>
    </div>
    <div class="h-list-body">
        <a href="#!" class="h-close-text"><i class="feather icon-chevrons-right"></i></a>
        <div class="main-friend-cont scroll-div">
            <div class="main-friend-list">
                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-1.jpg"
                                                         alt="Generic placeholder image ">
                        <div class="live-status">3</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-2.jpg"
                                                         alt="Generic placeholder image">
                        <div class="live-status">1</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-3.jpg"
                                                         alt="Generic placeholder image"></a>
                    <div class="media-body">
                        <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-1.jpg"
                                                         alt="Generic placeholder image">
                        <div class="live-status">1</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-4.jpg"
                                                         alt="Generic placeholder image"></a>
                    <div class="media-body">
                        <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-1.jpg"
                                                         alt="Generic placeholder image ">
                        <div class="live-status">3</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-2.jpg"
                                                         alt="Generic placeholder image">
                        <div class="live-status">1</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-3.jpg"
                                                         alt="Generic placeholder image"></a>
                    <div class="media-body">
                        <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-1.jpg"
                                                         alt="Generic placeholder image">
                        <div class="live-status">1</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-4.jpg"
                                                         alt="Generic placeholder image"></a>
                    <div class="media-body">
                        <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-1.jpg"
                                                         alt="Generic placeholder image ">
                        <div class="live-status">3</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-2.jpg"
                                                         alt="Generic placeholder image">
                        <div class="live-status">1</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-3.jpg"
                                                         alt="Generic placeholder image"></a>
                    <div class="media-body">
                        <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-1.jpg"
                                                         alt="Generic placeholder image">
                        <div class="live-status">1</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-4.jpg"
                                                         alt="Generic placeholder image"></a>
                    <div class="media-body">
                        <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-1.jpg"
                                                         alt="Generic placeholder image ">
                        <div class="live-status">3</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-2.jpg"
                                                         alt="Generic placeholder image">
                        <div class="live-status">1</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-3.jpg"
                                                         alt="Generic placeholder image"></a>
                    <div class="media-body">
                        <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-1.jpg"
                                                         alt="Generic placeholder image">
                        <div class="live-status">1</div>
                    </a>
                    <div class="media-body">
                        <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                    </div>
                </div>
                <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                    <a class="media-left" href="#!"><img class="media-object img-radius"
                                                         src="assets/images/user/avatar-4.jpg"
                                                         alt="Generic placeholder image"></a>
                    <div class="media-body">
                        <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ chat user list ] end -->

<!-- [ chat message ] start -->
<section class="header-chat">
    <div class="h-list-header">
        <h6>Josephin Doe</h6>
        <a href="#!" class="h-back-user-list"><i class="feather icon-chevron-left"></i></a>
    </div>
    <div class="h-list-body">
        <div class="main-chat-cont scroll-div">
            <div class="main-friend-chat">
                <div class="media chat-messages">
                    <a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5"
                                                                     src="assets/images/user/avatar-2.jpg"
                                                                     alt="Generic placeholder image"></a>
                    <div class="media-body chat-menu-content">
                        <div class="">
                            <p class="chat-cont">hello Datta! Will you tell me something</p>
                            <p class="chat-cont">about yourself?</p>
                        </div>
                        <p class="chat-time">8:20 a.m.</p>
                    </div>
                </div>
                <div class="media chat-messages">
                    <div class="media-body chat-menu-reply">
                        <div class="">
                            <p class="chat-cont">Ohh! very nice</p>
                        </div>
                        <p class="chat-time">8:22 a.m.</p>
                    </div>
                </div>
                <div class="media chat-messages">
                    <a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5"
                                                                     src="assets/images/user/avatar-2.jpg"
                                                                     alt="Generic placeholder image"></a>
                    <div class="media-body chat-menu-content">
                        <div class="">
                            <p class="chat-cont">can you help me?</p>
                        </div>
                        <p class="chat-time">8:20 a.m.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="h-list-footer">
        <div class="input-group">
            <input type="file" class="chat-attach" style="display:none">
            <a href="#!" class="input-group-prepend btn btn-success btn-attach">
                <i class="feather icon-paperclip"></i>
            </a>
            <input type="text" name="h-chat-text" class="form-control h-send-chat" placeholder="Write hear . . ">
            <button type="submit" class="input-group-append btn-send btn btn-primary">
                <i class="feather icon-message-circle"></i>
            </button>
        </div>
    </div>
</section>
<!-- [ chat message ] end -->

<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->

                        <div class="row ">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>java基础</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-2">
                                                <div class="card border-light  shadow-lg">
                                                    <img class="card-img-top border-bottom border"
                                                         src="https://onedrivecn-my.sharepoint.cn/personal/v130_onedrivecn_live/_layouts/15/getpreview.ashx?clientType=docLibGrid&amp;guidFile={DEA3BED2-D1DB-46B5-8F1A-76DD9E2DD106}&amp;guidSite={8787e6d2-bcf9-46c8-a03a-98d96fe6a26e}&amp;guidWeb={cc9dc155-444f-417b-9384-fc2518166e12}&amp;resolution=Width1024"
                                                         alt="Card image cap">
                                                    <div class="card-body border">
                                                        <h5 class="card-title">MySQL核心技术</h5>
                                                        <p class="card-text">尚学堂2021年新出数据库基础知识</p>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>


                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row ">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>微服务基础</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-2">
                                                <div class="card border-light  shadow-lg">
                                                    <img class="card-img-top border-bottom border"
                                                         src="https://onedrivecn-my.sharepoint.cn/personal/v130_onedrivecn_live/_layouts/15/getpreview.ashx?clientType=docLibGrid&amp;guidFile={DEA3BED2-D1DB-46B5-8F1A-76DD9E2DD106}&amp;guidSite={8787e6d2-bcf9-46c8-a03a-98d96fe6a26e}&amp;guidWeb={cc9dc155-444f-417b-9384-fc2518166e12}&amp;resolution=Width1024"
                                                         alt="Card image cap">
                                                    <div class="card-body border">
                                                        <h5 class="card-title">MySQL核心技术</h5>
                                                        <p class="card-text">尚学堂2021年新出数据库基础知识</p>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>


                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row ">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>微服务生态</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-2">
                                                <div class="card border-light  shadow-lg">
                                                    <img class="card-img-top border-bottom border"
                                                         src="https://onedrivecn-my.sharepoint.cn/personal/v130_onedrivecn_live/_layouts/15/getpreview.ashx?clientType=docLibGrid&amp;guidFile={DEA3BED2-D1DB-46B5-8F1A-76DD9E2DD106}&amp;guidSite={8787e6d2-bcf9-46c8-a03a-98d96fe6a26e}&amp;guidWeb={cc9dc155-444f-417b-9384-fc2518166e12}&amp;resolution=Width1024"
                                                         alt="Card image cap">
                                                    <div class="card-body border">
                                                        <h5 class="card-title">MySQL核心技术</h5>
                                                        <p class="card-text">尚学堂2021年新出数据库基础知识</p>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>


                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row ">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>项目实战</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-2">
                                                <div class="card border-light  shadow-lg">
                                                    <img class="card-img-top border-bottom border"
                                                         src="https://onedrivecn-my.sharepoint.cn/personal/v130_onedrivecn_live/_layouts/15/getpreview.ashx?clientType=docLibGrid&amp;guidFile={DEA3BED2-D1DB-46B5-8F1A-76DD9E2DD106}&amp;guidSite={8787e6d2-bcf9-46c8-a03a-98d96fe6a26e}&amp;guidWeb={cc9dc155-444f-417b-9384-fc2518166e12}&amp;resolution=Width1024"
                                                         alt="Card image cap">
                                                    <div class="card-body border">
                                                        <h5 class="card-title">MySQL核心技术</h5>
                                                        <p class="card-text">尚学堂2021年新出数据库基础知识</p>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>


                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- [ Main Content ] end -->

<!-- Required Js -->
<script src="assets/js/vendor-all.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/pcoded.min.js"></script>
<!-- prism Js -->
<script src="assets/plugins/prism/js/prism.min.js"></script>

<script src="assets/js/horizontal-menu.js"></script>
<script src="assets/js/menu-setting.min.js"></script>
<script type="text/javascript">
    // Collapse menu
    (function () {
        if ($('#layout-sidenav').hasClass('sidenav-horizontal') || window.layoutHelpers.isSmallScreen()) {
            return;
        }
        try {
            window.layoutHelpers.setCollapsed(
                localStorage.getItem('layoutCollapsed') === 'true',
                false
            );
        } catch (e) {
        }
    })();
    $(function () {
        // Initialize sidenav
        $('#layout-sidenav').each(function () {
            new SideNav(this, {
                orientation: $(this).hasClass('sidenav-horizontal') ? 'horizontal' : 'vertical'
            });
        });

        // Initialize sidenav togglers
        $('body').on('click', '.layout-sidenav-toggle', function (e) {
            e.preventDefault();
            window.layoutHelpers.toggleCollapsed();
            if (!window.layoutHelpers.isSmallScreen()) {
                try {
                    localStorage.setItem('layoutCollapsed', String(window.layoutHelpers.isCollapsed()));
                } catch (e) {
                }
            }
        });
    });
    $(document).ready(function () {
        $("#pcoded").pcodedmenu({
            themelayout: 'horizontal',
            MenuTrigger: 'hover',
            SubMenuTrigger: 'hover',
        });
    });
</script>

</body>
</html>
